<template>
  <div class="main">
    <a-affix :offset-top="0" style="margin-bottom:8px">
         <home-nav :userData='userinfo'></home-nav>
        <div v-if="!!banner.url" class="banner" :style="[{background: 'url('+banner.url+')',height:'80px',backgroundSize: 'cover'},banner.style]">
            <div class="title-box" :style="banner.titleBox.style">
              <p v-if="!!banner.title" class="title" :style="banner.title.style">{{banner.title.name}}</p>
              <p v-if="!!banner.content" class="content" :style="banner.content.style">{{banner.content.name}}</p>
                <p v-if="!!banner.describe" class="describe" :style="banner.describe.style">{{banner.describe.name}}</p>
            </div>

        </div>

    </a-affix>
   
    <router-view></router-view>
    <a-back-top v-if="banner.backTop" style="right:50px;"/>
  </div>
</template>
<script>
 const bannerDataInit = {url:'',title:{name:'',style:{}},content:{name:'',style:{}},titleBox:{style:{}} ,backTop:true}
export default {
 
  components:{
    'HomeNav': () => import('@/components/layouts/HomeNav'),
  },
  created(){
    this.initData()
  },
  methods: {
   initData(){
       let route = this.$route

        if (!route.matched.some(record => record.meta.banner)) {
          this.banner =Object.assign(bannerDataInit) ;
          return
       }
       for (let index = 0; index < route.matched.length; index++) {
         const element = route.matched[index];
         if(!!element.meta.banner){
           this.banner = Object.assign(bannerDataInit,element.meta.banner) 
           
           return;
         }
         
       }
      
   }
  },
  data () {
    return {
      userinfo:{
          info:this.$store.getters.userInfo,
          module:'trademarkLibrary',
      },
      banner:bannerDataInit
    }
  }
}
</script>
<style lang="less" scoped>
  .main{
    min-height: 100%;
    background: #f5f5f5;
    
  }
  .main-top{
    position: fixed;
    top:0;
    left: 0;

  }
  .banner{
    position: relative;
    display: flex;
    align-items: center;
  }
  .title-box{
     color: #fff;
     padding-left: 125px;
    p{
      margin-bottom: 0.15em;
    }
  }
  .title{
   
    color: #fff;
    font-weight: bold;
    font-size: 20px;
  }
  .content{
    font-size: 16px;
    font-weight: bold;
  }
  .describe{
     font-size: 14px;
     color:#5795bc;
     
  } 
</style>